import * as api from '@/services/vpnServerMonitor';
import { DrawerForm, ProFormInstance } from '@ant-design/pro-form';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';

import React, {  useRef,  } from 'react';


type VpnServerFormProps = {
  visible: boolean;
  current: API.VpnServer | undefined;
  group: API.VpnGroupMonitorModel | undefined;
  onCancel: () => void;
};

const VpnServerForm: React.FC<VpnServerFormProps> = (props) => {
  const { visible, onCancel,  current, group } = props;

  if (!visible) {
    return null;
  }

  const actionRef = useRef<ActionType>();
  const formRef = useRef<ProFormInstance>();
  // const { hasRight } = useModel('useAuthModel');
  // const [myloading, setMyloading] = useState<boolean>(true);
  // const [dataSource, setDataSource] = useState<API.VpnServerReportList | undefined>(undefined);


  const loadData = async (
    params?: { [key: string]: any },
    sorter?: { [key: string]: any },
    filter?: { [key: string]: any },) => {
      const result = await api.iplist(params, sorter, filter);
    // const result = await api.iplist({ instanceId: current ? current.instanceId : undefined, groupIds: group ? [group.id] : undefined });
    // if (result && result.success) {
    //   setDataSource(result);
    // }
    // else{
    //   setDataSource(undefined);
    // }
    // setMyloading(false);
    return result;
  };

  // useEffect(() => {
  //   loadData();
  // }, []);


  const columns: ProColumns<API.VpnServerOnlineIp>[] = [
    // {
    //   title: '分组',
    //   dataIndex: 'groupNames',
    //   width: 200,
    //   renderText: (_, record) => {
    //     return record.groupNames?.toString()
    //   }
    // },
    {
      title: '服务器名称',
      sorter: true,
      dataIndex: 'serverName',
      width: 150,
    },
    // {
    //   title: '服务器ID',
    //   dataIndex: 'instanceId',
    //   sorter: true,
    //   width: 100,
    // },
    {
      title: 'IP',
      dataIndex: 'ip',
      sorter: true,
      width: 120,
    },
    {
      title: '国家',
      sorter: true,
      dataIndex: 'ipCountry',
    },
    {
      title: '地区',
      sorter: true,
      dataIndex: 'ipRegion',
    },
    {
      title: '网络',
      sorter: true,
      dataIndex: 'ipNetwork',
    },
    {
      title: '汇报时间',
      sorter: true,
      width: 150,
      dataIndex: 'updateTime',
    },
  ];

  return (
    <DrawerForm<API.VpnServerOnlineIp>
      open={visible}
      title="登录IP列表"
      formRef={formRef}
      autoFocusFirstInput
      width={1000}
      // onFinish={handleFormSubmit}
      drawerProps={{
        // forceRender: true,
        // destroyOnClose: true,
        // closable: false,
        onClose: onCancel,
        // maskClosable: false,
      }}
      submitter={{
        render: (props, defaultDoms) => {
          return [defaultDoms[0]];
        },
      }}
    >
      <ProTable<API.VpnServerOnlineIp>
        rowKey="serverId"
        actionRef={actionRef}
        // loading={myloading}
        options={{
          fullScreen: false,
          reload: false,
          setting: false,
          density: false,
        }}
        search={false}
        pagination={{
          defaultPageSize: 100,
          pageSizeOptions: [
            '100',
            '200',
            '300',
            '500',
            '1000',
            '2000',
            '5000',
            '10000',
          ],
          hideOnSinglePage: false,
        }}
        columns={columns}
        expandable={undefined}
        params={{
          instanceId: current ? current.instanceId : undefined, 
          groupIds: group ? [group.id] : undefined
        }}
        // dataSource={dataSource?.data}
        request={loadData}
      />

    </DrawerForm>
  );
};

export default VpnServerForm;
